/*主页xiao_mi_internet中的专属样式*/
/*顶部导航条容器*/
.topbar-wrapper{
    /*设置宽度全屏*/
    width:100%;
    height:40px;
    /*设置行高：使文字垂直居中*/
    line-height: 40px;
    /*设置背景颜色*/
    background-color: #333;
}
/*设置超链接的颜色*/
.topbar a{
    font-size:12px;
    color:#b0b0b0;
    display:block;
    margin-top:-15px;
}
/*设置超链接移入效果*/
.topbar a:hover{
    color:#fff;
}
/*设置中间的分割线*/
.topbar .line{
    color:#424242;
    font-size:12px;
    margin:0 8px; 
    margin-top:-15px;
}
/*设置左侧导航栏*/
.service, .topbar li{
    float:left;
}
.app{
    position: relative;
}

/*设置app下的小三角*/
/* li:hover > .app::after{ */
.app::after{
    content:'';
    display:none;
    position: absolute;
    width:0;
    height:0;
    /*设置四个方向的边框*/
    border:8px solid transparent;
    /*去除上边框*/
    border-top:none;
    bottom: 0;
    right:0;
    left:0;
    border-bottom-color:#fff;
    margin:auto;
}
li:hover >.app .qrcode{
    display: block;
}
.app:hover .qrcode,
.app:hover::after{
    display: block;
    height:148px;
}
/* .app-wrapper:hover>.app .qrcode{
    display: block;
} */
/*设置下载app的下拉*/
.app .qrcode{
    display: none;
    position: absolute;
    left:-40px;
    width:124px;
    height:0px;
    overflow: hidden;
    background-color:#fff;
    line-height: 1px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    /*为样式设置过渡效果*/
    transition: height 0.3s;
}
/*设置二维码图片*/
.app .qrcode img{
    display: block;
    width:90px;
    height:90px;
    margin:17px; 
} 
/*设置二维码文字*/
.app .qrcode span{
    font-size: 14px;
    color: #000;
}
/*设置右侧导航栏*/
.shop-cart,.user-info{
    float:right;
}
/* .shop-cart{
    margin-left:26px;
} */
/*设置购物车的样式*/
.shop-cart a{
    width:120px;
    background-color: #424242;
    text-align: center;
}
.shop-cart:hover a{
    background-color: #fff;
    color:#FF6700;
}
.shop-cart i{
    margin-right: 2px;
}
/*设置中间的header*/
.header{
    height:100px; 
}
.header-wrapper{
    position: relative;
}
/*设置logo*/
.header .logo{
    float:left;
    margin-top: 22.5px;
    width:55px;
    height:55px;
    position: relative;
    overflow: hidden;
     /*隐藏logo中的文字*/
    /* text-indent: -9999px; */
}
/*设置logo中的超链接*/
.header .logo a{
    position: absolute;
    display: block;
    left:0;
    width:55px;
    height:55px;
    background-color: #FF6700;
    background-image: url("../January_4/picture/2.jpg");
    background-position: center;
    transition: left 0.3s;
   
}
/*设置home图片*/
.header .logo .home{
    left:-55px;
}
/*设置鼠标移入以后*/
.header .logo:hover .mi{
    left:55px;
}
.header .logo:hover .home{
    left:0;
}
/*设置中间导航条*/
.header .nav-wrapper{
    float:left;
    margin-left: 7px;
    
}
/*设置导航条*/
.header .nav{
    /* width: 792px; */
    height:100px;
    line-height: 100px;
    margin-left: 58px;
}
/*设置导航条中的li*/
.nav-wrapper li{
    float:left;
    list-style: none;
}
.nav-wrapper li a{
    display: block;
    font-size: 16px;
    margin-right:20px;
} 
.nav-wrapper li a:hover{
    color:#FF6700;
}
/*隐藏全部商品*/
.all-goods{
    visibility: hidden;
}
.nav .goods-info{
    /* height:228px; */
    height:0px;
    width:100%;
    overflow: hidden;
    background-color:#fff;
  
    position: absolute;
    top:100px;
    left:0px;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    transition: height 0.3s;
    z-index:9999;
}
/* .nav li:not(:first-of-type,:not(:nth-child(9)),:not(:nth-child(10))) ~ .goods-info, */
.nav .show-goods:hover ~ .goods-info,
.goods-info:hover{
    height:228px;
    border-top:1px solid rgb(224,224,224);
    box-shadow: 0 5px 3px rgb(0,0,0,.2);
}
/*设置搜索框的容器*/
.search-wrapper{
    width:296px;
    height:50px;
    float:right;
    background-color:rgb(224,224,224);
    margin-top: 25px;
    border: 1px solid rgb(224,224,224);
}
.search-wrapper .search-inp{
    box-sizing:border-box;
    width:244px;
    float:left;
    padding: 0 10px;
    border: none;
    height:50px;
    font-size: 16px;
    border:1px solid rgb(224,224,224);
}
/*设置input获取焦点以后的样式*/
.search-wrapper .search-inp:focus{
    
}
.search-wrapper .search-btn{
    float:left;
    width:52px;
    height:50px;
    padding:0;
    border:none;
    background-color: #fff;
    color:#616161;
    font-size: 16px;
    border-left:1px solid rgb(224,224,224);
}


